<template>
  <div id="information">
    <!-- 头部 -->
    <headnavbar>
      <!-- #left 语法糖 等同于 name="left" -->
      <template #center>
        <div class="infos">
          消息
        </div>
      </template>
      <template #right>
        <div>
          <img
              class="toPeople"
              @touchstart="
                (e) => {
                  toPeople(e);
                }
              "
              src="./image/消息.png"
              alt=""
          />
        </div>
      </template>
    </headnavbar>

    <!-- 中间内容区域 -->
    <div class="main">
      <div class="content">
        <img class="touxiang" src="./image/通知.png" alt="" />
        <span class="send">通知</span>
        <img class="enter" src="./image/进入.png" alt="" />
      </div>
      <div class="content">
        <img class="touxiang" src="./image/评论.png" alt="" />
        <span class="common">评论</span>
        <img class="enter" src="./image/进入.png" alt="" />
      </div>
      <!-- 循环获得当前有的会话的信息 -->
      <div :key="index" v-for="(data, index) in datas">
        <router-link :to="{ name: 'onlyinfo', params: { id: data.name,name :data.id ,userid:data.userid} }">
          <div class="contentAll" @click="ontap(data.id)">
          <!-- cover 为覆盖层 方便触摸时获得明确的元素 好操作 -->
          <div
            @touchstart="
              (e) => {
                messageTouch(e);
              }
            "
            @touchend="
              (e) => {
                messageTouchEnd(e);
              }
            "
            @touchmove="
              (e) => {
                messageTouchMove(e);
              }
            "
            class="cover"
          >
            <div
              @touchstart="
                (e) => {
                  deleteInfo(data.id);
                }
              "
              class="delete"
            >
              删除
            </div>
          </div>
          <div class="content peopleMsg">
            <!-- 图片暂时只能些固定的 js动态给的不行 没有服务器 找不到图片 写死的是basse64 格式能正常显示 -->
            <img class="touxiang1" :src="data.img" alt="" />
            <div class="userText">
              <div style="width: 100%">
                <span style="font-size: 15px">{{ data.name }}</span>
                <span style="float: right; font-size: 12px; color: #b6b6b6;margin-right:15px">{{
                 data.time | dateFormat
                }}</span>
              </div>
              <span style="font-size: 12px; color: #b6b6b6">{{
                data.content
              }}</span>
              <span class="tongzhi" :style="{backgroundColor: data.color}">{{data.num}}</span>
            </div>
          </div>
        </div>
        </router-link>
      </div>
    </div>
  </div>
</template>
<script>
import headnavbar from "../../components/HeadNavBar";
import {dataUtil} from "../../utils/dataUtil.js";
export default {
  data() {
    return {
      touchClientX: 0, // 按下时x的位置
      touchClientY: 0,
      touchMoveClientX: 0, // 按下移动x的位置
      touchMoveClientY: 0,
      oldElement: null,
      oldBorElement: null,
      datas: [
      ],
      oldDisX: 0,
      isShow: false,
      isHori: true, // 是否是水平滑动
      isFirst: true, // 是否是第一次滑动
    };
  },
  created(){
    console.log("---------")
    console.log(this.$store.state.userinfo.userList)
    this.datas = this.$store.state.userinfo.userList
  },
  components: {
    headnavbar,
  },
  methods: {
    ontap(id){
      this.$store.commit("setcolor",id)
    },
    messageTouch(e) {
      // 在开始时先清除其他的元素的状态 如果存在的话
      if (this.oldElement) {
        this.oldElement.style.transform = `translateX(0px)`;
        this.oldBorElement.style.transform = `translateX(0px)`;
      }
      if (e.target.className !== "cover") return; // 如果不是cover就不执行 直接return
      this.touchClientX = e.touches[0].clientX;
      this.touchClientY = e.touches[0].clientY;
      // console.log(this.touchClientX,this.touchClientY)
    },
    messageTouchMove(e) {
      if (e.target.className !== "cover") return;
      this.touchMoveClientX = e.touches[0].clientX;
      this.touchMoveClientY = e.touches[0].clientY;
      var disX = this.touchMoveClientX - this.touchClientX;
      var disY = this.touchMoveClientY - this.touchClientY;
      // 判断是横屏滑动还是竖屏滑动  依据就是第一次的滑动的x轴 y轴滑动距离相比较
      if (this.isFirst) {
        this.isFirst = false;
        //判断方向
        // console.log(Math.abs(disY) , Math.abs(disX))
        if (Math.abs(disY) > Math.abs(disX)) {
          // console.log('书评')
          this.isHori = false;
        }
        if (Math.abs(disY) < Math.abs(disX)) {
          // console.log('横屏')
          this.isHori = true;
        }
      }

      if (disX < 80 && disX > -80 && this.isHori) {
        e.target.style.transform = `translateX(${disX}px)`;
        e.target.parentNode.children[1].style.transform = `translateX(${disX}px)`;
      }
      // 如果oldDisX 大于 disX说明是向左化
      // console.log(disX,this.oldDisX)
      if (disX < this.oldDisX) {
        this.isShow = true;
      } else {
        this.isShow = false;
      }
      this.oldDisX = disX;
      // 做移动判断是向左还是向右 并且设立一个布尔值isShow 告诉结束应该是显示还是隐藏 删除
    },
    messageTouchEnd(e) {
      this.isFirst = true;
      if (e.target.className !== "cover" || !this.isHori) return;
      // 通过isShow 来确定translateX的值是0 还是-80
      if (this.isShow) {
        e.target.style.transform = `translateX(-80px)`;
        e.target.parentNode.children[1].style.transform = `translateX(-80px)`;
      } else {
        e.target.style.transform = `translateX(0px)`;
        e.target.parentNode.children[1].style.transform = `translateX(0px)`;
      }
      // 对当前触发的元素进行一下保存 好让在做另一个元素触发事还原当前元素
      this.oldElement = e.target;
      this.oldBorElement = e.target.parentNode.children[1];
    },
    toPeople(e) {
      this.$router.push("/Information/people");
    },
    deleteInfo(id) {
      // console.log(id)
      this.datas.shift(id);
    },
  },
};
</script>
<style scoped>
.toPeople {
  position: absolute;
  top: 50%;
  right: 2%;
  transform: translateY(-50%);
}
.main {
  background: #f0eff5;
  width: 100%;
  height: 100%;
  min-height: 736px;
  z-index: 1;
}
.main .content {
  background: #ffffff;
  height: 50px;
  border-top: 2px solid #e4e4e4;
  position: relative;
  width: 100%;
}
.contentAll {
  position: relative;
  width: 375px;
  overflow: hidden;
}
.main .peopleMsg {
  width: 100%;
  border-top: 1px solid #e4e4e4;
}
.touxiang {
  width: 15%;
  height: 40px;
  width: 40px;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  margin-left: 10px;
}
.touxiang1{
  height: 40px;
  width: 40px;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 3%;
  transform: translateY(-50%);
}
.peopleMsg .userText {
  display: inline-block;
  width: 85%;
  position: absolute;
  left: 17%;
  top: 10%;
}
.send,
.common {
  display: inline-block;
  position: relative;
  top: -20%;
}
.enter {
  float: right;
  position: relative;
  top: 50%;
  right: 2%;
  transform: translateY(-50%);
  height: 20px;
  width: 20px;
}
.cover {
  position: absolute;
  top: 0;
  height: 50px;
  width: 100%;
  /* background: chartreuse; */
  z-index: 99;
}
.cover,
.peopleMsg {
  transition: all 0.5s;
  /* transform: translateX(-80px); */
  /* cover和 peopleMsg同时加*/
  /* 操作这样元素的translateX让删除按钮显示 完全显示为-80px */
}
/* 删除按钮在每个消息的右边隐藏了  利用的是transform */
.delete {
  position: absolute;
  top: 0;
  right: 0;
  transform: translateX(80px);
  background: rgb(247, 87, 87);
  width: 80px;
  height: 51px;
  color: #ffffff;
  line-height: 40px;
  text-align: center;
}
.tongzhi{
  position: absolute;
  right: 7%;
  height: 10px;
  width: 10px;
  border-radius: 50%;
  font-size: 12px;
  color: #ffffff;
  /* background-color: rgb(235, 57, 33); */
  line-height: 20px;
  text-align: center;
}
.infos{
  position: absolute;
  left: 48%;
}
</style>
